<!-- 顶部搜索框 -->
<template>
  <view class="header">
    <view class="user" @click="goInfo">
      <image src="../../static/icon/user.png" mode="" />
      <!-- <image :src="img" mode="" /> -->
    </view>
    <view class="search" @click="goSearch">
      <image class="search-icon" src="../../static/icon/search-icon.png" mode="" />
      <input type="text" disabled :placeholder="$t('index.search.placeholder0')">
    </view>
    <view class="more" @click="showMore">
      <view class="dot"></view>
      <view class="dot dot2"></view>
      <view class="dot"></view>
    </view>
    <view class="more-card" :style="isMore ? 'height: 180rpx' : `height: 0rpx; overflow: hidden;`">
      <view class="box">
        <view class="item blue">{{ $t('index.Taiwan') }}</view>
        <view class="item">敬請期待</view>
        <view class="tran"></view>
      </view>
    </view>
  </view>
  <!-- 头部轮播图-大盘数据 -->
  <view class="main">
    <banner></banner>
    <view class="big-market">
      <template v-for="(item, index) in market" :key="index">
        <view :class="['market-item', { middle: index == 1 }]" @click="detail(item.symbol)" v-if="index < 3">
          <view class="state">{{ item.stockName }}</view>
          <view class="dec">
            <view :class="['value', item.increaseRate > 0 ? 'red' : 'green']">{{ item.regularMarketPrice }}</view>
            <view :class="['increase-rate', item.increaseRate > 0 ? 'red' : 'green']">{{ item.increaseRate }}%</view>
          </view>
        </view>
      </template>
    </view>
    <!-- 金刚区 -->
    <fastNav></fastNav>
    <!-- 滑动区域 -->
    <slide></slide>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { requestApi } from '@/api'
import { onShow } from '@dcloudio/uni-app';
import fastNav from './components/fast-nav.vue'
import banner from './components/swiper.vue';
import slide from './components/slide.vue';

function goInfo() {
  uni.switchTab({
    url: '/pages/information/information'
  });
}
function goSearch() {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}
const isMore = ref(false)
function showMore() {
  isMore.value = !isMore.value
}
function detail(symbol) {
  uni.navigateTo({
    url: '/pages/zhishuDetail/zhishuDetail' + `?symbol=${JSON.stringify(symbol)}`
  })
}

const market = ref([])
async function getMarket() {
  const { data, status } = await requestApi.getMarket()
  if (status == 0) {
    market.value = data.map((item) => {
      if (item.result != null) {
        const { meta, indicators } = item.result[0]
        const { quote } = indicators
        if (quote[0].close != null) {
          const { regularMarketPrice, chartPreviousClose, rate } = meta
          const { stockName } = item
          const increaseRate = rate * 100
          return {
            stockName,
            regularMarketPrice,
            chartPreviousClose,
            increaseRate: increaseRate.toFixed(2),
            ...meta,
            stockName
          }
        }
      }
    })
  }
}

onShow(() => {
  getMarket()
})
const img = ref()
onMounted(async () => {
  // setInterval(() => {
  //   getMarket()
  // }, 6000)
  getMarket()
  // const res = await requestApi.getCode()
  // const base64 = uni.arrayBufferToBase64(res)
  //  img.value = 'data:image/png;base64,' + base64
  // console.log(img);
  // websocketFeature.create(
  //   'ws://43.154.53.144:8080/stock2c1/',
  //   (e) => {
  //     console.log(e,123);
  //   }
  // );
})

</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-dark;
}

.header {
  background-color: $uni-bg-color-light-dark;
  height: 88rpx;
  // #ifndef H5
  margin-top: 88rpx;
  // #endif
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 40rpx;
  position: relative;

  .search {
    background-color: $uni-bg-color-dark;
    margin-left: 25rpx;
    width: 456rpx;
    height: 64rpx;
    border-radius: 110rpx;
    position: relative;

    .search-icon {
      position: absolute;
      top: 18rpx;
      left: 26rpx;
      width: 28rpx;
      height: 28rpx;
    }

    input {
      color: $uni-text-color-placeholder;

      padding: 11rpx 0 0 77rpx;
      font-size: 28rpx;
    }
  }

  .more {
    border: 1px solid $uni-border-color;

    margin-left: 45rpx;
    width: 58rpx;
    height: 58rpx;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .dot {
      width: 5rpx;
      height: 5rpx;
      border-radius: 100%;
      background-color: $uni-border-color;
      border: 2rpx solid $uni-bg-color-light-dark;
    }

    .dot2 {
      margin-left: 10rpx;
      margin-right: 10rpx;
    }
  }

  .more-card {
    position: absolute;
    top: 90rpx;
    right: 40rpx;
    transition: all .2s;
    z-index: 99;

    .box {
      transition: all .2s;
      position: relative;
      background-color: #fff;
      width: 156rpx;
      border-radius: 20rpx;
      text-align: center;
      padding: 30rpx 10rpx;


      .item {
        border-bottom: solid 2rpx #EAEAEA;
        padding-top: 13rpx;
        padding-bottom: 7rpx;
        color: #b0b0b0;
      }

      .blue {
        color: #488BF7;
      }

      .tran {
        position: absolute;
        top: -9rpx;
        right: 20rpx;
        transform: rotateZ(45deg);
        background-color: #fff;
        width: 20rpx;
        height: 20rpx;
      }
    }
  }
}

.user {
  width: 64rpx;
  aspect-ratio: 1/1;
  border-radius: 100%;
  display: flex;

  image {
    margin: 12rpx 14rpx 13rpx;
    width: 36rpx;
    height: 39rpx;
  }
}

.user {
  background-color: #488BF7;

}

.main {
  margin: 40rpx 40rpx 0;

  .big-market {
    background: $uni-bg-color-light-dark;

    width: 670rpx;
    // height: 127rpx;
    border-radius: 28rpx;
    margin-top: 40rpx;
    padding: 24rpx 39rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .market-item {
      display: flex;
      flex-direction: column;
      text-align: center;

      .state {
        font-size: 22rpx;
        color: #fff;
        white-space: nowrap;
      }

      .dec {
        .value {
          font-size: 36rpx;
        }

        // display: flex;
        .increase-rate {
          font-size: 20rpx;
        }
      }
    }

    // .middle{
    // margin: 0 88rpx;
    // margin: 0 auto;
    // }
  }
}

.green {
  color: #35C759;
}

.red {
  color: #F04848;
}
</style>
